<template>
  <div>
    <van-cell-group title="我的">
      <van-cell title="我的" is-link @click="$router.push('/index/notification/mine')">
        <template #title>
          <span class="custom-title">我的动态</span>
        </template>
        <template #right-icon>
          <div style="display: flex;align-items: center">
            <van-icon name="arrow"/>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group title="消息通知">
      <van-cell title="评论" is-link @click="$router.push('/index/notification/detailed?type=0&menu='+'comment')">
        <template #title>
          <span class="custom-title">评论</span>
        </template>
        <template #right-icon>
          <div style="display: flex;align-items: center">
            <van-tag v-if="unread.commentCount !== 0" round type="primary">{{unread.commentCount}}</van-tag>
            <van-icon name="arrow"/>
          </div>
        </template>
      </van-cell>

      <van-cell title="点赞" is-link @click="$router.push('/index/notification/detailed?type=1&menu='+'love')">
        <template #title>
          <span class="custom-title">点赞</span>
        </template>
        <template #right-icon>
          <div style="display: flex;align-items: center">
            <van-tag v-if="unread.loveCount !== 0" round type="primary">{{unread.loveCount}}</van-tag>
            <van-icon name="arrow"/>
          </div>
        </template>
      </van-cell>

      <van-cell title="关注" is-link  @click="$router.push('/index/notification/detailed?type=2&menu='+'follow')">
        <template #title>
          <span class="custom-title">关注</span>
        </template>
        <template #right-icon>
          <div style="display: flex;align-items: center">
            <van-tag v-if="unread.followCount !== 0" round type="primary">{{unread.followCount}}</van-tag>
            <van-icon name="arrow"/>
          </div>
        </template>
      </van-cell>

      <van-cell title="系统消息" is-link   @click="$router.push('/index/notification/detailed?type=3&menu='+'system')">
        <template #title>
          <span class="custom-title">系统消息</span>
        </template>
        <template #right-icon>
          <div style="display: flex;align-items: center">
            <van-tag v-if="unread.systemCount !== 0" round type="primary">{{unread.systemCount}}</van-tag>
            <van-icon name="arrow"/>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "Notification",
  data() {
    return {
      unread: null
    }
  },
  created() {
    this.unread = {...JSON.parse(localStorage.getItem('unread'))};
    this.getUnread();
  },
  activated() {
    this.getUnread();
  },
  methods: {
    getUnread() {
      return axios.get('/common/getUnread',{
        headers: {isShowFullLoading: 'F'}
      }).then(res => {
        this.unread = {...res.result};
      })
    }
  }
}
</script>

<style scoped>

</style>
